<script setup lang="ts">

</script>

<template>
	<div class="card-box" >
		<div class="info-box">
			<div class="user-box">
				<n-skeleton
					:width="24"
					:height="24"
					circle
					:sharp="false"
					size="medium"
					class="avatar"
				/>
				<n-skeleton
					:width="50"
					:height="16"
					text
					:sharp="false"
					size="medium"
					class="name"
				/>
				<n-skeleton
					:width="70"
					:height="20"
					round
					:sharp="false"
					size="medium"
					class="tag"
				/>
				<n-skeleton
					:width="20"
					:height="20"
					circle
					:sharp="false"
					size="medium"
					class="typeIcon"
				/>
				<n-skeleton
					:width="40"
					:height="16"
					text
					:sharp="false"
					size="medium"
					class="type"
				/>
			</div>
			<div class="date-box">
				<n-skeleton
					:width="14"
					:height="14"
					circle
					:sharp="false"
					size="medium"
					class="date-icon"
				/>
				<n-skeleton
					:width="100"
					:height="16"
					text
					:sharp="false"
					size="medium"
					class="date"
				/>
			</div>
			<div class="title-box">
				<n-skeleton
					:width="100"
					:height="35"
					text
					:sharp="false"
					size="medium"
					class="title"
				/>
				<n-skeleton
					:width="18"
					:height="18"
					circle
					:sharp="false"
					size="medium"
					class="location-icon"
				/>
				<n-skeleton
					:width="100"
					:height="14"
					text
					:sharp="false"
					size="medium"
					class="location"
				/>
			</div>
			<n-skeleton
				:width="500"
				:height="60"
				text
				:sharp="false"
				size="medium"
				class="content"
			/>

			<div class="footer-box">
				<div class="comment-box">
					<n-skeleton
						:width="14"
						:height="14"
						circle
						:sharp="false"
						size="medium"
						class="comment-icon"
					/>
					<n-skeleton
						:width="80"
						:height="16"
						text
						:sharp="false"
						size="medium"
						class="commentCount"
					/>
					<n-skeleton
						:width="20"
						:height="20"
						circle
						:sharp="false"
						size="medium"
						class="look-icon"
					/>
					<n-skeleton
						:width="20"
						:height="16"
						text
						:sharp="false"
						size="medium"
						class="lookCount"
					/>
				</div>
				<n-skeleton
					:width="70"
					:height="20"
					text
					:sharp="false"
					size="medium"
					class="detail"
				/>
			</div>
		</div>
		<div class="thing-box">
			<n-image width="150" height="150" :src="''" lazy>
				<template #placeholder>
					<Loading />
				</template>
			</n-image>
		</div>
	</div>
</template>

<style lang="less" scoped>
@import "@/styles/mixin.less";
.card-box {
	.flex(row,flex-start,center);
	width: 800px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 20px;
	padding-top: 20px;

	// padding: 10px;
	.info-box {
		flex: 1;
		.user-box {
			.flex(row,flex-start,center);
			margin-bottom: 10px;
			.avatar {
				margin-right: 5px;
			}
			.name {
				margin-right: 10px;
			}
			.tag {
				margin-right: 20px;
			}
			.typeIcon {
				margin-right: 10px;
			}
			.type {
			}
		}
		.date-box {
			.flex(row,flex-start,center);
			margin-bottom: 10px;

			.date-icon {
				margin-right: 5px;
			}
			.date {
			}
		}
		.title-box {
			.flex(row,flex-start,center);
			margin-bottom: 15px;
			.title {
				margin-right: 20px;
			}
			.location-icon {
				margin-right: 5px;
			}
			.location {
			}
		}
		.content {
			margin-bottom: 20px;
		}
		.footer-box {
			.flex(row,space-between,center);
			.comment-box {
				.flex(row,flex-start,center);

				.comment-icon {
					margin-right: 5px;
				}
				.commentCount {
				}
				.look-icon {
					margin-left: 10px;
				}
				.lookCount {
				}
			}
			.detail {
			}
		}
	}
	.thing-box {
		width: 300px;
		height: 200px;
		// height: 400px;
		// border: 1px solid #ccc;
		.flex(row,center,center);
	}
}

@keyframes lines {
	from {
		background-position-x: 100%;
		background-color: #eee;
	}
	to {
		background-position-x: 0%;

		background-color: #ccc;
	}
}
</style>
